/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@media (forced-colors: active) {
    :host {
        --highcontrast-swatch-disabled-icon-color: GrayText;
        --highcontrast-swatch-focus-indicator-color: ButtonText;
        --highcontrast-swatch-background-color-selected: Background;
        --highcontrast-swatch-border-color-selected: Highlight;
        --highcontrast-swatch-border-color: ButtonText;
        --highcontrast-swatch-fill-foreground-color: ButtonText;
    }

    .fill {
        forced-color-adjust: none;
    }

    :host([disabled]),
    :host([disabled]) {
        --highcontrast-swatch-border-color: GrayText;
    }
}

:host {
    inline-size: var(--mod-swatch-size, var(--spectrum-swatch-size));
    block-size: var(--mod-swatch-size, var(--spectrum-swatch-size));
    -webkit-user-select: none;
    user-select: none;
    outline: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
}

.disabledIcon {
    inline-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-swatch-disabled-icon-size));
    block-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-swatch-disabled-icon-size));
}

:host,
:host:before {
    border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius));
}

:host([selected]) {
    background-color: var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-swatch-inner-border-color-selected)));
}

:host([selected]) .fill {
    clip-path: polygon(
        calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2),
        calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2),
        calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2),
        calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2)
    );
    border-radius: 0;
}

:host([selected]) .fill:before {
    box-shadow: none;
    border-radius: 0;
}

:host([selected]):before {
    opacity: 1;
}

:host .is-image .fill:before {
    background-color: initial;
}

:host([mixed-value]) .fill {
    background: none;
    background: var(--spectrum-picked-color, transparent);
}

:host([mixed-value]) .mixedValueIcon {
    color: var(--spectrum-swatch-dash-icon-color);
    display: block;
}

:host([nothing]) .fill {
    background-color: initial;
    background-color: var(--spectrum-picked-color, transparent);
    background-image: none;
}

:host([nothing]) .fill:after {
    inline-size: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness));
    content: "";
    block-size: 200%;
    background: var(--highcontrast-swatch-fill-foreground-color, var(--mod-swatch-slash-icon-color, var(--spectrum-swatch-slash-icon-color)));
    position: absolute;
    transform: rotate(-45deg);
}

:host([nothing][shape="rectangle"]) .fill:after {
    transform: rotate(-25deg);
}

:host([disabled]) .disabledIcon,
:host([disabled]) .disabledIcon {
    display: block;
}

:host:before {
    content: "";
    border-width: var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected));
    border-style: solid;
    border-color: var(--highcontrast-swatch-border-color-selected, var(--mod-swatch-border-color-selected, var(--spectrum-swatch-border-color-selected)));
    opacity: 0;
    pointer-events: none;
    position: absolute;
    inset: 0;
}

:host:after {
    content: "";
    inset: calc(var(--mod-swatch-focus-indicator-gap, var(--spectrum-swatch-focus-indicator-gap)) * -2);
    opacity: 0;
    border-width: var(--mod-swatch-focus-indicator-thickness, var(--spectrum-swatch-focus-indicator-thickness));
    border-style: solid;
    border-color: var(--highcontrast-swatch-focus-indicator-color, var(--mod-swatch-focus-indicator-color, var(--spectrum-swatch-focus-indicator-color)));
    border-radius: var(--mod-swatch-focus-indicator-border-radius, var(--spectrum-swatch-focus-indicator-border-radius));
    transition: opacity var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out;
    position: absolute;
}

:host(:focus-visible):after {
    opacity: 1;
}

.fill {
    inline-size: 100%;
    block-size: 100%;
    box-sizing: border-box;
    border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius));
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
    overflow: hidden;
}

.fill:before {
    content: "";
    z-index: 0;
    box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--highcontrast-swatch-border-color, var(--mod-swatch-border-color, var(--spectrum-swatch-border-color)));
    border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius));
    position: absolute;
    inset: 0;
}

:host([border="none"]) .fill:before,
.fill:before {
    background-color: initial;
    background-color: var(--spectrum-picked-color, transparent);
}

:host([border="none"]) .fill:before {
    box-shadow: none;
}

:host([border="light"]) .fill:before {
    box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--highcontrast-swatch-border-color-light, var(--mod-swatch-border-color-light, var(--spectrum-swatch-border-color-light)));
}

.mixedValueIcon {
    pointer-events: none;
    color: #0000;
    color: var(--spectrum-picked-color, transparent);
    display: none;
}

.disabledIcon {
    z-index: 1;
    pointer-events: none;
    color: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color)));
    stroke: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color)));
    display: none;
    position: relative;
}

.disabledIcon path:first-child {
    fill: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color)));
}

.disabledIcon path:last-child {
    fill: var(--mod-swatch-icon-border-color, var(--spectrum-swatch-icon-border-color));
}

:host([shape="rectangle"]) {
    inline-size: calc(var(--mod-swatch-size, var(--spectrum-swatch-size)) * 2);
}

:host([rounding="none"]),
:host([rounding="none"]) .fill,
:host([rounding="none"]) .fill:before,
:host([rounding="none"][selected]) .fill,
:host([rounding="none"][selected]) .fill:before,
:host([rounding="none"]):after,
:host([rounding="none"]):before {
    border-radius: 0;
}

:host([rounding="full"][selected]:not([shape="rectangle"])) .fill,
:host([rounding="full"][selected]:not([shape="rectangle"])) .fill:before,
:host([rounding="full"]:not([shape="rectangle"])),
:host([rounding="full"]:not([shape="rectangle"])) .fill,
:host([rounding="full"]:not([shape="rectangle"])) .fill:before,
:host([rounding="full"]:not([shape="rectangle"])):after,
:host([rounding="full"]:not([shape="rectangle"])):before {
    border-radius: 100%;
}

:host([rounding="full"][selected]:not([shape="rectangle"])) .fill {
    clip-path: circle(calc(50% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) at 50% 50%);
}

::slotted([slot="image"]) {
    object-fit: contain;
    inline-size: 100%;
    block-size: 100%;
    transition:
        width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out,
        height var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out;
}
